<template>
  <div class="search">
    <div class="search-contain">
      <div class="search-Sprite"></div>
      <div class="search-input">
        <el-input placeholder="搜索商品" prefix-icon="el-icon-search" v-model="search"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
    };
  },
};
</script>

<style lang="less" scope>
.search {
  width: 100%;
  height: 60px;
  background-color: white;
  .search-contain {
    width: 60%;
    margin: auto;
    display: flex;
    height: 100%;
    align-items: center;
    .search-Sprite {
      background-image: url("../../assets/xuebi2.png");
      background-repeat: no-repeat;
      width: 56px;
      height: 58px;
      animation: sprite 2s infinite step-end;
    }
    .search-input {
      margin: auto;
    }
  }
}
@keyframes sprite {
  0% {
    background-position: left top;
  }
  16.5% {
    background-position: -56px top;
  }
  33% {
    background-position: -111px top;
  }
  49.5% {
    background-position: -167px top;
  }
  66% {
    background-position: -223px top;
  }
  82.5% {
    background-position: -279px top;
  }
  100% {
    background-position: -335px top;
  }
}
</style>>